<template>
      <div class="report-review">
            <el-card>
                  <template #header>
                        <div class="header-container">
                              <span class="header-title">举报信息审核</span>
                              <el-button type="info" size="small" @click="openGlobalHistory">查看全部审核记录</el-button>
                        </div>
                  </template>



                  <el-table :data="reportList" style="width: 100%" v-loading="loading">
                        <el-table-column prop="id" label="ID" width="80" />
                        <el-table-column prop="applicantId" label="举报人ID" width="100" />
                        <el-table-column prop="targetUserId" label="被举报人ID" width="100" />
                        <el-table-column prop="feedbackType" label="类型" width="100" />
                        <el-table-column prop="description" label="举报内容" />
                        <el-table-column prop="status" label="状态" width="100" />
                        <el-table-column prop="createTime" label="提交时间" width="180" />
                        <el-table-column label="操作" width="180">
                              <template #default="scope">
                                    <el-button type="primary" size="small" @click="openDialog(scope.row)">审核</el-button>
                              </template>
                        </el-table-column>
                  </el-table>
            </el-card>

            <!-- 审核弹窗 -->
            <el-dialog v-model="dialogVisible" title="举报审核" width="600px">
                  <el-descriptions :column="1" border>
                        <el-descriptions-item label="ID">{{ currentReport?.id }}</el-descriptions-item>
                        <el-descriptions-item label="举报人ID">{{ currentReport?.applicantId }}</el-descriptions-item>
                        <el-descriptions-item label="被举报人ID">{{ currentReport?.targetUserId }}</el-descriptions-item>
                        <el-descriptions-item label="类型">{{ currentReport?.feedbackType }}</el-descriptions-item>
                        <el-descriptions-item label="内容">{{ currentReport?.description }}</el-descriptions-item>
                        <el-descriptions-item label="材料">
                              <el-link v-if="evidenceImages.length" @click.prevent="openImageDialog"
                                    style="cursor: pointer; color: #409EFF">
                                    查看材料
                              </el-link>
                              <span v-else>无材料</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="状态">{{ currentReport?.status }}</el-descriptions-item>
                  </el-descriptions>

                  <el-form :model="auditForm" label-width="100px" class="mt-4">
                        <el-form-item label="审核意见">
                              <el-input v-model="auditForm.auditOpinion" type="textarea" rows="3" />
                        </el-form-item>
                        <el-form-item label="积分变更">
                              <el-input-number v-model="auditForm.scoreChange" :min="-20" :max="20" />
                        </el-form-item>
                        <el-form-item>
                              <el-button type="success" @click="submitAudit('通过')">通过</el-button>
                              <el-button type="danger" @click="submitAudit('驳回')">驳回</el-button>
                        </el-form-item>
                  </el-form>
            </el-dialog>

            <!-- 图片查看弹窗 -->
            <el-dialog v-model="imageDialogVisible" title="查看材料" width="80%" :before-close="handleImageDialogClose"
                  center>
                  <div class="image-scroll-box" style="text-align:center;">
                        <el-image v-for="(img, index) in evidenceImages" :key="index" :src="img" fit="contain"
                              style="max-height: 60vh; max-width: 100%; margin-bottom: 15px;"
                              preview-src-list="evidenceImages" />
                  </div>
            </el-dialog>

            <!-- 全部审核记录弹窗 -->
            <el-dialog v-model="globalHistoryDialogVisible" title="全部审核记录" width="800px">
                  <el-table :data="globalHistoryList" v-loading="globalHistoryLoading" style="width: 100%">
                        <el-table-column prop="id" label="记录ID" width="80" />
                        <el-table-column prop="targetUserId" label="被举报人ID" width="120" />
                        <el-table-column prop="status" label="状态" width="100" />
                        <el-table-column prop="auditOpinion" label="审核意见" />
                        <el-table-column prop="scoreChange" label="积分变更" width="120" />
                        <el-table-column prop="auditorId" label="审核人ID" width="120" />
                        <el-table-column prop="auditTime" label="审核时间" width="180" />
                  </el-table>
            </el-dialog>

      </div>
</template>

<script setup lang="ts">
import useInstitueReport from '@/hooks/institute/useInstitueReport';

const {
      reportList,
      loading,
      dialogVisible,
      currentReport,
      auditForm,
      openDialog,
      submitAudit,
      imageDialogVisible,
      openImageDialog,
      handleImageDialogClose,
      evidenceImages,
      globalHistoryDialogVisible,
      globalHistoryList,
      globalHistoryLoading,
      openGlobalHistory,
} = useInstitueReport();
</script>


<style scoped>
.image-scroll-box {
      max-height: 60vh;
      overflow-y: auto;
      text-align: center;
      padding: 10px;
}

.header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
}

.header-title {
      font-size: 1.2rem;
      font-weight: 600;
}
</style>